<script setup lang="ts">
import VirtualizeTable from '@/common/lty-table/VirtualizeTable.vue'
import { getPartyCategory } from '@/service/api/sys/user/user'
import { useOperate } from '@/stores/operate'
import { selectDictLabel } from '@/utils'

const router = useRouter()
const operateStore = useOperate()
const typeObj = {
  1: '查询',
  2: '新增',
  3: '编辑',
  4: '修改密码',
  5: '删除',
  6: '批量删除'
}
const partyCategory = ref<any>([]) // 党员组织数组
const table_config = ref({
  thead: [
    {
      label: '行政区',
      prop: 'regionName'
    },
    {
      label: '单位',
      prop: 'unit'
    },
    {
      label: '党组织',
      prop: 'partyOrgId'
    },
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '职务',
      prop: 'position'
    },
    {
      label: '角色',
      prop: 'roleName'
    },
    {
      label: '年龄',
      prop: 'age'
    },
    {
      label: '联系方式',
      prop: 'phone'
    }
  ],
  filter_Config: {
    partyMemberTypeId: '',
    name: '',
    phone: ''
  },
  SpecialField: ['partyOrgId'],
  paging: true,
  num: true,
  select: true,
  expend: false,
  isoperate: true,
  operatewidth: '256px',
  ispagination: true,
  methodName: 'getUser'
})
const multiples = ref([]) // 表格多选内容

// 用户模板
const userTemplate = {
  account: '',
  password: '',
  createDtm: '',
  name: '',
  regionId: 0,
  govOrgId: 0,
  updateDtm: '',
  position: '',
  age: 0,
  gender: 1,
  phone: '',
  politicalOutlookId: '',
  partyOrgId: 0,
  partyMemberTypeId: 0,
  joinPartyTime: '',
  becomeFullTime: '',
  roleId: -1
}

// 获取所有党员类别
const getpartyCategory = async () => {
  const res = await getPartyCategory()
  partyCategory.value = res.data.map((item: any) => {
    return {
      value: item.id,
      label: item.name
    }
  })
  console.log(res)
}

// 跳转到操作页 1查询 2新增 3编辑 4修改密码 5删除 6批量删除
const operate = (type: Number, data?: any) => {
  operateStore.setType(type)
  operateStore.setName('user')
  operateStore.setTypeObj(typeObj)
  if (type === 4) {
    operateStore.setForm({
      id: data.id,
      oldPassword: data.password,
      password: ''
    })
  } else if (type === 5) {
    operateStore.setForm({ id: data.id })
  } else if (type === 6) {
    operateStore.setForm({ ids: multiples.value })
  } else {
    operateStore.setForm(Object.assign({}, userTemplate, data))
  }
  router.push('/operate')
}

// 获取多选框选中内容
const getMultiples = (data: any) => {
  multiples.value = data.map((item: any) => {
    return item.id
  })
}

onMounted(() => {
  getpartyCategory()
})
</script>

<template>
  <div class="flex h-full flex-col">
    <div class="mb-[20px] flex items-center justify-between">
      <div>
        <el-button type="success" class="button_addTo" @click="operate(2, {})">
          <svg-icon
            name="icon-system-button-create"
            width="16px"
            height="16px"
            class="mr-3"
          />
          <span>新增用户</span>
        </el-button>
        <el-button type="primary" class="button_default">
          <svg-icon
            name="icon-system-button-lead"
            width="16px"
            height="16px"
            class="mr-3"
          />
          <span>导入信息</span>
        </el-button>
        <el-popover
          placement="bottom"
          trigger="click"
          popper-class="popover_darkColor"
        >
          <template #reference>
            <el-button type="primary" class="button_default">
              <svg-icon
                name="icon-system-button-download"
                width="16px"
                height="16px"
                class="mr-3"
              />
              <span>下载/导出操作</span>
            </el-button>
          </template>
          <div class="flex flex-col py-1">
            <div class="down_btn">导出用户信息</div>
            <div class="down_btn">下载导入模板</div>
          </div>
        </el-popover>
        <el-button type="danger" class="button_delete" @click="operate(6)"
          >批量删除</el-button
        >
      </div>
      <div class="flex items-center">
        <!--筛选列表条件-->
        <div class="whitespace-nowrap text-xs text-[--auxiliary]">人员类别</div>
        <el-select
          v-model="table_config.filter_Config.partyMemberTypeId"
          class="select_darkColor m-2"
          placeholder="请选择类别"
          effect="dark"
          clearable
        >
          <el-option
            v-for="item in partyCategory"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          class="input_darkColor"
          v-model="table_config.filter_Config.name"
          placeholder="请输入姓名,电话"
          clearable
        >
          <template #suffix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>
    <div class="flex-1">
      <VirtualizeTable
        :table_config="table_config"
        @selectChange="getMultiples"
      >
        <template #partyOrgId="{ row }">
          {{ selectDictLabel(partyCategory, row.partyOrgId) }}
        </template>
        <template #operate="{ row }">
          <div class="flex justify-center">
            <svg-icon
              name="icon-system-button-see"
              width="32px"
              height="32px"
              class="mr-3 cursor-pointer rounded-full border border-[#5E9DB4] p-[8px]"
              @click="operate(1, row)"
            />
            <svg-icon
              name="icon-system-button-bianji"
              width="32px"
              height="32px"
              class="mr-3 cursor-pointer rounded-full border border-[#5E9DB4] p-[8px]"
              @click="operate(3, row)"
            />
            <svg-icon
              name="icon-system-button-password"
              width="32px"
              height="32px"
              class="mr-3 cursor-pointer rounded-full border border-[#5E9DB4] p-[8px]"
              @click="operate(4, row)"
            />
            <svg-icon
              name="icon-system-button-shanchu"
              width="32px"
              height="32px"
              class="mr-3 cursor-pointer rounded-full border border-[#5E9DB4] p-[8px]"
              @click="operate(5, row)"
            />
          </div>
        </template>
      </VirtualizeTable>
    </div>
  </div>
</template>

<style scoped>
.back {
  background: transparent;
}

.down_btn {
  background: transparent;
  color: #5e9db4;
  padding: 5px 18px;
  text-align: center;
  cursor: pointer;
}

.down_btn:hover {
  background-color: rgba(45, 242, 255, 0.06);
  font-family: MicrosoftYaHei, MicrosoftYaHei;
  font-weight: bold;
  color: #2df2ff;
}
</style>
